<template>
    <div class="app-container calendar-list-container">
        <search :list="queryList" :queryEntity="queryEntity"></search>
        <buttons :showQuery="true" :showBack="false" @query="doQuery" :list="btnList" :disabled="disabled"></buttons>
        <grid gridTitle="收款汇总" :url="url" :columns="columns" :enableEdit="false" :loading="true" ref="mainGrid"
            height="auto" diffHeight="275" :pagination="false" :permissions="permissions" :multi="false"
            @change="rowCilck" :queryEntity="queryEntity">
        </grid>
    </div>
</template>
<script>
    import request from '@/router/axios'
    import { Message, MessageBox } from 'element-ui'
    import url from '@/const/apiURL'
    import grid from '@/components/Grid'
    import buttons from '@/components/Buttons'
    import { mapGetters } from 'vuex'
    import { BillStatusFormatter, BusinessTypeFormatter, YesOrNoFormatter, BillSourceFormatter } from '@/const/dict'
    import search from '@/components/Search'
    import { colunms } from '@/const/colunms'
    import { dict } from '@/const/dict'
    import { queryField } from '@/const/query'

    export default {
        components: { grid, buttons, search },
        data() {
            return {
                orderNo: '',
                url: url.FINA_BILL_COUNT_IN_URL,
                entity: {},
                queryEntity: { key: 'key' },
                disabled: true,
                columns: [
                    { label: '客户名称', width: 200, prop: 'customerName', align: 'left' },
                    { label: '币种', width: 80, prop: 'currency', align: 'center' },
                    { label: '对账金额', width: 120, prop: 'amount', align: 'center' },
                    { label: '已收金额', width: 120, prop: 'payAmount', align: 'center' },
                    { label: '剩余金额', width: 120, prop: '', align: 'center', formatter: function (row) { return (row.amount - row.payAmount).toFixed(2) } },

                ],
                btnList: [],
                queryList: [
                    { name: '创建时间', type: 'date', prop: 'startTime', placeholder: "" },
                    { name: '----', type: 'date', prop: 'endTime', placeholder: "", },
                    { name: '客户名称', type: 'query', prop: 'customerCode', rowValue: 'customerCode', rowName: 'customerName', url: url.CUSTOMER_LIST_URL, columns: colunms().customerColumns, pagination: true, queryList: queryField().customer, queryEntity: { customerType: '' } },
                ]
            }
        },
        created() {
        },
        computed: {
            ...mapGetters(['permissions'])
        },
        methods: {
            doQuery(text) {
                this.$refs['mainGrid'].doQuery(text)
            },
            rowCilck(row) {
                this.disabled = row.length == 0
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .w-body {
        padding-top: 8px;
    }

    .w-table {
        border: 1px solid #ebeef5;
    }

    .w-table-title {
        border: 1px solid #ebeef5;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        vertical-align: middle;
        width: 100%;
        font-size: 14px;
        color: gray;
    }
</style>